<template>
  <div class="search">
    <div>
      <span>仓库编号</span>
      <span>仓库名称</span>
      <span>仓库状态</span>
    </div>
    <div class="ipt">
      <el-form :inline="true" label-position="top" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.code" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="全部" value="3" />
            <el-option label="停用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item> -->
        <div class="button">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onNew">重置</el-button>
        </div>
        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        code: '',
        name: '',
        status: ''
      }
    }
  },
  methods: {
    // 点击搜索
    // 将表单数据通过emit父传子传给父组件
    // 通知父组件调用接口
    onSearch() {
      this.$emit('onSearch', this.formInline)
    },
    // 点击重置
    // 清空搜索表单
    onNew() {
      this.formInline = {
        code: '',
        name: '',
        status: ''
      }
    }
  }
}
</script>
<style>
.el-input .el-input__inner {
  height: 35px;
  line-height: 40px;
  background: #f8f5f5;
  border-radius: 6px;
}
</style>

<style lang="scss" scoped>

.search {
  overflow: hidden;
  margin: 20px 0;
  padding: 20px 20px 1px 20px;
  border-radius: 10px;
  background-color: #fff;
  div {
    margin-bottom: 10px;
    span {
      // display: block;
      margin-left: 4px;
      font-size: 13px;
      color: #887e7e;
      margin-right: 153px;
    }
  }
  .ipt {
    // background-color: aqua;
    overflow: hidden;
    .el-form-item {
      margin-right: 20px;
      color: #f1ecec;
    }
  }
  .button {
    // margin-left: 30px;
    float: right;
    .el-button {
      border-radius: 40px;
      color: black;
      margin-right: 13px;
      margin-top: 4px;
      height: 33px;
      line-height: 7px;
      width: 96px;
    }
  }
}
</style>
